<template>
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin/user/list' }">用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="search">
        <el-input placeholder="请输入内容" v-model="kw" >
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          <el-button slot="append"  @click="reset" >重置</el-button>
        </el-input>
        <el-button type="success" @click="addUser">添加</el-button>
      </div>

      <div class="user-list">

        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="#"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="220">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="260">
          </el-table-column>
          <el-table-column
            prop="roles"
            label="角色"
            width="260">
            <template slot-scope="scope">
              <el-tag
                v-for="item in scope.row.roles" :key="item.id"
                disable-transitions>{{item.display_name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="120">
            <template slot-scope="item">
              <el-switch
                v-model="item.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="onOff(item.row)"
                >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间"
            width="170">
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button @click="delUser(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
              <el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current_page"
          :page-sizes="[15, 30, 50, 70]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
    export default {
        name: "UserList",
      data(){
          return {
            tableData:[],
            page:1,
            per_page:15,
            total:0,
            current_page:0,
            form:{
              status:1
            },
            formLabelWidth: '120px',
            kw:'',
          }
      },
      created() {
          this.getUsers();
      },
      methods:{
          getUsers(){
            this.axios.get('/api/admin/user',{
              params:{page:this.page,per_page:this.per_page}
            }).then(res=>{
              this.tableData = res.data.data.data;
              this.current_page = res.data.data.current_page;
              this.per_page = res.data.data.per_page;
              this.total = res.data.data.total
            }).catch(err=>{
              this.$message.error(err.response.data.message)
            })
          },
        handleSizeChange(val) {
          this.per_page = val;
          this.getUsers();
        },
        handleCurrentChange(val) {
          this.page = val;
          this.getUsers();
        },
        onOff(row){
          this.$confirm('你确认要做此操作吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.setUserStatus(row)

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
            //还原状态
            row.status = row.status == 0 ? 1 : 0;

          });
        },
        setUserStatus(row){
          this.axios.post('/api/admin/user/on-off',{
            status:row.status,
            id:row.id
          }).then(res=>{
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          }).catch(err=>{
            this.$message.error(err.response.data.message)
          })
        },
        editUser(row){
          this.$router.push(`/admin/user/edit/${row.id}`)
        },
        delUser(row){
          this.$confirm('你确认要做此操作吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.delete(`/api/admin/user/${row.id}`).then(res=>{
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getUsers();
            }).catch(err=>{
              this.$message.error(err.response.data.message)
            });

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });


          });
        },
        search(){
            if(this.kw == ''){
              this.$message.error('请输入搜索关键词')
              return ;
            }

            this.axios.post('/api/admin/user/search',{
              kw:this.kw,
              per_page:this.per_page
            }).then(res=>{
              this.tableData = res.data.data.data;
              this.current_page = res.data.data.current_page;
              this.per_page = res.data.data.per_page;
              this.total = res.data.data.total
            }).catch(err=>{
              this.$message.error(err.response.data.message)
            })
        },
        reset(){
            this.kw = '';
            this.getUsers();
        },
        addUser(){
            this.$router.push('/admin/user/add')
        }
      }
    }
</script>

<style scoped lang="less">
.search{
  margin: 10px 0;
  .el-input-group{
    width: 47%;
  }
}
.page{
  margin-top: 5px;
}
</style>
